<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script>
            /* 
                创建10W个节点，添加到页面上
            */
            window.onload = function(){
                console.time("test1");
                //test1：120 毫秒 - 倒计时结束
                for(var i = 0; i < 100000; i++){
                    var newDiv = document.createElement("div");
                    document.body.appendChild(newDiv);
                }

                console.timeEnd("test1");


                /* 
                    先创建好10W个节点，将10W节点查入到一个节点上，最后将这1个节点添加到页面上
                */

                //test2：78 毫秒 - 倒计时结束   文档碎片
                console.time("test2");
                var node = document.createElement("div");
                for(var i = 0; i < 100000; i++){
                    var newDiv = document.createElement("div");
                    node.appendChild(newDiv);
                }
                document.body.appendChild(node);
                console.timeEnd("test2");
            }
        </script>
    </head>
    <body>
        
    </body>
</html>